<template>
  <div class="p20 h100 white-bg">
 
      <dragForm ref="dragFormRef" 
    v-model="dragFormJson"
    :customoComponents="customoComponents"
      @save="save" ></dragForm>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
 ComponentType
  } from "element-easy-form";
const route = useRoute();
import {custom} from './custom'
const customoComponents = ref([
  ...custom
])
const elementEasyFormRef = ref<any>();
const elementFormrenderRef = ref<any>();
const formType = ref<any>('');
const save = (data) =>{
    console.log(data)
}
const handleCheck = (e:any)=>{
}
const dragFormJson = ref({
    "language": "zh",
    "schema": [
        {
            "label": "黄洋",
            "type": "COMPONENT",
            "title": "输入框",
            "formItemAttrs": {},
            "formType": "all",
            "attrs": {
                "type": "text",
                "show-password": false,
                "readonly": false,
                "placeholder": "请输入"
            },
            "rules": [
                {
                    "dataType": "required",
                    "required": true,
                    "message": "不能为空",
                    "trigger": "change"
                }
            ],
            "prop": "c3ab6137-5c4b-4883-a5b8-0f67dbdff0dc",
            "events": [],
            "attrsJson": [
                {
                    "label": "类型",
                    "prop": "type",
                    "type": "COMPONENT",
                    "defaultValue": "text",
                    "componentName": "ElSelect",
                    "attrs": {
                        "placeholder": "请选择类型",
                        "clearable": true
                    },
                    "rules": [
                        {
                            "required": true,
                            "message": "类型不能为空",
                            "trigger": "change"
                        }
                    ],
                    "children": [
                        {
                            "componentName": "ElOption",
                            "value": "text",
                            "label": "文本框"
                        },
                        {
                            "componentName": "ElOption",
                            "label": "密码框",
                            "value": "password"
                        },
                        {
                            "componentName": "ElOption",
                            "label": "文本域",
                            "value": "textarea"
                        },
                        {
                            "componentName": "ElOption",
                            "label": "数字",
                            "value": "number"
                        }
                    ]
                },
                {
                    "type": "COMPONENT",
                    "label": "是否显示切换密码图标",
                    "prop": "show-password",
                    "defaultValue": false,
                    "componentName": "ElSwitch",
                    "attrs": {}
                },
                {
                    "type": "COMPONENT",
                    "label": "是否只读",
                    "prop": "readonly",
                    "defaultValue": false,
                    "componentName": "ElSwitch",
                    "attrs": {}
                },
                {
                    "type": "COMPONENT",
                    "label": "是否禁用",
                    "prop": "disabled",
                    "defaultValue": null,
                    "componentName": "ElSwitch",
                    "attrs": {}
                },
                {
                    "label": "显示隐藏",
                    "prop": "hidden",
                    "type": "FORMITEM",
                    "defaultValue": {
                        "matchPattern": "&&",
                        "type": "select",
                        "dataSelect": [],
                        "value": false,
                        "dataJs": "function hidden(config,data){\n      return false;\n    }"
                    },
                    "componentName": "ElFunctionHidden",
                    "attrs": {
                        "placeholder": "请输入",
                        "lang": "js",
                        "title": "编辑显示隐藏函数"
                    },
                    "rules": []
                },
                {
                    "label": "标签",
                    "prop": "label",
                    "type": "FORMITEM",
                    "defaultValue": "黄洋",
                    "componentName": "InputLocale",
                    "attrs": {
                        "placeholder": "请输入"
                    },
                    "rules": [
                        {
                            "required": true,
                            "message": "不能为空",
                            "trigger": "change"
                        }
                    ]
                },
                {
                    "label": "字段唯一标识",
                    "type": "FORMITEM",
                    "prop": "prop",
                    "defaultValue": "c3ab6137-5c4b-4883-a5b8-0f67dbdff0dc",
                    "componentName": "ElInput",
                    "attrs": {
                        "placeholder": "请输入"
                    },
                    "rules": [
                        {
                            "required": true,
                            "message": "不能为空",
                            "trigger": "change"
                        }
                    ]
                },
                {
                    "type": "FORMITEM",
                    "label": "规则",
                    "prop": "rules",
                    "defaultValue": [
                        {
                            "dataType": "required",
                            "required": true,
                            "message": "不能为空",
                            "trigger": "change"
                        }
                    ],
                    "componentName": "Rules",
                    "attrs": {
                        "placeholder": "请选择类型"
                    },
                    "rules": [
                        {
                            "required": false,
                            "message": "类型不能为空",
                            "trigger": "change"
                        }
                    ]
                },
                {
                    "type": "COMPONENT",
                    "label": "默认值",
                    "prop": "defaultValue",
                    "defaultValue": "",
                    "componentName": "ElInput",
                    "attrs": {
                        "placeholder": "请输入"
                    },
                    "rules": [
                        {
                            "required": false,
                            "message": "",
                            "trigger": "change"
                        }
                    ]
                },
                {
                    "type": "COMPONENT",
                    "label": "输入框占位文本",
                    "prop": "placeholder",
                    "defaultValue": "请输入",
                    "componentName": "ElInput",
                    "attrs": {
                        "placeholder": "请输入"
                    }
                },
                {
                    "type": "COMPONENT",
                    "label": "最大输入长度",
                    "prop": "maxlength",
                    "defaultValue": "",
                    "componentName": "ElInput",
                    "attrs": {
                        "placeholder": "请输入"
                    },
                    "rules": [
                        {
                            "required": false,
                            "message": "名字不能为空",
                            "trigger": "change"
                        }
                    ]
                },
                {
                    "type": "COMPONENT",
                    "label": "输入框行数，仅类型为 '文本域' 时有效",
                    "prop": "rows",
                    "defaultValue": "",
                    "componentName": "ElInputNumber",
                    "attrs": {
                        "placeholder": "请输入",
                        "controlsPosition": "right"
                    }
                },
                {
                    "type": "COMPONENT",
                    "label": "最小输入长度",
                    "prop": "minlength",
                    "componentName": "ElInput",
                    "defaultValue": "",
                    "attrs": {
                        "placeholder": "请输入"
                    },
                    "rules": [
                        {
                            "required": false,
                            "message": "名字不能为空",
                            "trigger": "change"
                        }
                    ]
                }
            ],
            "componentName": "ElInput",
            "hidden": {
                "matchPattern": "&&",
                "type": "select",
                "dataSelect": [],
                "value": false,
                "dataJs": "function hidden(config,data){\n      return false;\n    }"
            },
            "id": "263b03bf-af57-4371-a2bb-74174a2d0ded"
        }
    ],
    "formType": "drag-form",
    "model": {
        "c3ab6137-5c4b-4883-a5b8-0f67dbdff0dc": ""
    },
    "formAttrs": {
        "hide-required-asterisk": false,
        "inline-message": false,
        "status-icon": false,
        "scroll-to-error": false,
        "disabled": false
    },
    "locale": {
        "dataList": [
            {
                "id": "9c246126-601a-4e3c-890d-6b1a2cd3ab49",
                "zh": "名字",
                "en": "name"
            },
            {
                "id": "23fcee24-f5a4-4aac-8bca-ff1b217fdc81",
                "zh": "年龄",
                "en": "age"
            }
        ],
        "dataLangList": [
            {
                "name": "汉语",
                "key": "zh",
                "id": "7017a6b5-1c21-4c1b-acd6-419a3cffabf6"
            },
            {
                "name": "英语",
                "key": "en",
                "id": "f1a9f7b3-aa26-4711-b5a9-db83fcb19d68"
            }
        ]
    }
}
);
const formJson = ref<any>({
  "formJson": [
    {
      "attrs": {
        "gutter": 0,
        "justify": "start",
        "align": "middle"
      },
      "type": "LAYOUT",
      "componentName": "ElRow",
      "children": [
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "马娜",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {},
              "rules": [ {
          "required": true,
          "message": "数据",
          "trigger": "change"
        }],
              "prop": "MelissaAmyLewis",
              "componentName": "ElCheckboxGroup",
              "children": [
                {
                  "componentName": "ElCheckbox",
                  "label": "选项1"
                }
              ]
            }
          ]
        },
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "雷超",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {},
              "rules": [],
              "prop": "KarenJessicaRodriguez",
              "componentName": "ElCheckboxGroup",
              "children": [
                {
                  "componentName": "ElCheckbox",
                  "label": "选项1"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "model": {},
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    "scroll-to-error": false
  }
});
const count = ref(0);
const state: any = reactive({
  activeDate: "",
});

onMounted(() => {
});
</script>

<style   lang="scss">
.drag-form .drag-form-content{
  background-color: transparent;

}
 .drag-form .el-collapse-item button{
    padding-left: 5px !important;
  }
.drag-form .drag-form-content .drag-form-content-tool{
    border-bottom: 1px solid var(--el-border-color);
}

 </style>
